<template>
  <div>
    <loading v-if="!articleInfo"/>
    <div class="root" v-if="articleInfo">
      <div class="rootTop">
        <div class="title">{{articleInfo.title}}</div>
        <div class="readInfo">
          <div class="readTime">{{(articleInfo.time*1000)|formatDate2('yyyy.MM.dd')}}</div>
          <div class="readNumber">阅读: {{articleInfo.totalRead}}</div>
        </div>
        <div class="pic">
          <img :src="articleInfo.imageUrl" alt="">
        </div>
        <div class="contentText" v-html="articleInfo.content"></div>
      </div>

      <div class="lineApart"></div>
      <div class="rootTop">
        <div class="commentNumber">{{articleInfo.totalComment}}评论数</div>
        <div class="commentList">
          <div class="comment" v-for="(item, index) in commentInfo" :key="index">
            <img :src="item.imageUrl" v-if="item.imageUrl">
            <img src="@/assets/images/male.png" alt="" v-else>
            <div class="itemRight">
              <p class="name">{{item.nickName}}</p>
              <p class="time">{{(item.time*1000)|formatTime}}</p>
              <p class="content">{{item.content}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="praiseInfo">
        <span class="isPraise" @click="toPraise">
            <img src="@/assets/images/icon_nor_zan.png" alt="" v-if="articleInfo.isPraise==0">
            <img src="@/assets/images/icon_sel_zan.png" alt="" v-if="articleInfo.isPraise==1">
            {{articleInfo.totalPraise}}
        </span>
        <div class="vertical-line"></div>
        <span class="commentNumber2" @click="showCommentWindow">
            <img src="@/assets/images/icon_pinglun.png" alt="">
             {{articleInfo.totalComment}}
        </span>
      </div>
      <transition name="up">
        <div class="inputDiv" v-if="isShowCommentWindow">
          <input type="text" placeholder="请输入评论" v-focus v-model="content" @blur="blurFuc"/>
          <div class="commit" @click="commitComment">提交</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import api from '@/api/article'
  import Loading from '@/components/loading'
  import common from '@/common'
  import {axios} from '@/api/axios'

  export default {
    components: {
      Loading
    },
    created () {
      if (common.isOs() === 'Wechat' && !common.getQueryStringByWx('token')) {
        common.wechatlogin()
      } else {
        this.getData()
        this.getCommentList()
      }
    },
    mounted () {
      // 监听滚动事件
      window.addEventListener('scroll', this.handleScroll)
    },
    data () {
      return {
        articleInfo: '',
        commentInfo: [],
        lastPage: false,
        userId: '',
        itId: '',
        startIndex: 0,
        offset: 10,
        content: '',
        quserId: '',
        pid: '',
        operation: 1,
        isShowCommentWindow: false
      }
    },
    methods: {
      // 获取文章详情
      getContentInfo () {
        api.articleInfo({userId: this.userId, itId: this.itId}).then((res) => {
          if (res.data.code === 200) {
            this.articleInfo = res.data.data
            this.operation = res.data.data.isPraise
          } else {
            window.console.log('获取文章详情失败')
          }
        }).catch((error) => {
          window.console.log(`getContentInfo:+${error}`)
        })
      },
      // 获取评论列表
      getCommentList () {
        api.commentList({itId: this.itId, startIndex: this.startIndex, offset: this.offset}).then((res) => {
          if (res.data.code === 200) {
            this.content = ''
            this.commentInfo = this.commentInfo.concat(res.data.data.list)
            this.lastPage = res.data.data.lastPage
          } else {
            window.console.log('获取评论列表失败')
          }
        }).catch((error) => {
          window.console.log(`getCommentList:+${error}`)
        })
      },
      // 发表评论
      toComment () {
        if (this.content == null || this.content === '') {
          return this.$vux.toast.text('评论不能为空！', 'center')
        }
        api.toComment({userId: this.userId, itId: this.itId, content: this.content}).then((res) => {
          if (res.data.code === 200) {
            this.$vux.toast.text('发表成功！', 'center')
            this.getCommentList()
          }
        }).catch()
      },
      // 点赞
      toPraise () {
        api.toPraise({
          userId: this.userId,
          quserId: this.userId,
          operation: 1 - parseInt(this.operation),
          target: 8,
          emoji: '',
          pid: this.articleInfo.itId
        }).then((res) => {
          if (res.data.code === 200) {
            this.operation = 1 - parseInt(this.operation)
            this.articleInfo.isPraise = parseInt(this.operation)
            if (this.operation === 1) {
              this.articleInfo.totalPraise = parseInt(this.articleInfo.totalPraise) + 1
            } else {
              this.articleInfo.totalPraise = parseInt(this.articleInfo.totalPraise) - 1
            }
          } else {
//            window.alert(res.data.code)
          }
        }).catch()
      },
      // 调用系统输入框弹窗
      showCommentWindow () {
        this.isShowCommentWindow = true
      },
      commitComment () {
        this.isShowCommentWindow = false
        // 上传
        this.toComment()
      },
      // 授权后获取数据、参数
      getData () {
        this.userId = this.$route.query.userId || ''
        this.itId = this.$route.query.itId || ''
        this.getContentInfo()
      },
      // 滚动事件
      handleScroll () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        if (scrollTop + windowHeight === scrollHeight) {
          if (!this.lastPage) {
            this.startIndex += 10
            this.getCommentList()
          }
        }
      },
      // input失去焦点的监听
      blurFuc () {
        this.isShowCommentWindow = false
      }
    },
    watch: {
      $route (to, from) {
        if (this.$route.query.userId) {
          let token = this.$route.query.token
          window.localStorage.setItem('token', token)
          axios.defaults.headers.common['Authorization'] = token
          // Wechat登录成功
          this.getData()
          this.getCommentList()
        }
      }
    },
    directives: {
      focus: {
        // input获取焦点 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  .root {
    overflow: hidden;
    /*background: #00b365;*/
    .rootTop {
      padding: 1.25rem;

      .title {
        font-size: 1.67rem;
        color: #2B2B2B;
      }
      .readInfo {
        margin-top: 1.25rem;
        display: inline-block;
        width: 100%;
        .readTime {
          float: left;
          font-size: 1rem;
          color: #c5c5c5;
        }
        .readNumber {
          float: right;
          font-size: 1rem;
          color: #c5c5c5;
        }
      }
      .pic {
        margin: 0.5rem 0 1rem;
        vertical-align: middle;
        img {
          width: 100%;
          height: 16.92rem;
          object-fit: cover;
        }
      }
      .contentText {
        color: #4a4a4a;
        font-size: 1.17rem;
        line-height: 1.7;
      }
    }
    .lineApart {
      background: #f0f0f0;
      height: 0.80rem;
      left: 0;
    }
    .rootTop {
      padding: 1.25rem;
      .commentNumber {
        font-size: 1.17rem;
        color: #999999;
      }
      .commentList {
        padding-bottom: 4rem;
        .comment {
          display: inline-block;
          padding: 1.25rem 0;
          width: 100%;
          border-bottom: 0.1px solid #ececec;
          img {
            float: left;
            width: 2.67rem;
            height: 2.67rem;
            border-radius: 50%;
            vertical-align: middle;
          }
          .itemRight {
            float: left;
            margin-left: 1rem;
            width: 84%;
            .name {
              font-size: 1.17rem;
              color: #999999;
            }
            .time {
              margin-top: 0.5rem;
              font-size: 1rem;
              color: #c4c4c7;
            }
            .content {
              margin-top: 0.73rem;
              font-size: 1.25rem;
              color: #2b2b2b;
              line-height: 1.4;
            }
          }
        }
      }
    }
    .praiseInfo {
      position: fixed;
      display: inline-block;
      background: white;
      height: 4.4rem;
      bottom: 0;
      left: 0;
      width: 100%;
      font-size: 1.15rem;
      box-shadow: 0px -5px 10px #ededed;
      .isPraise {
        text-align: center;
        width: 49%;
        float: left;
        display: block;
        line-height: 4.4rem;
        vertical-align: middle;
        color: #a6a6a6;
        img {
          vertical-align: middle;
          height: 1.5rem;
          width: 1.5rem;
        }
      }
      .vertical-line {
        vertical-align: middle;
        float: left;
        height: 2.08rem;
        display: block;
        margin-top: 1rem;
        background: #c4c4c4;
        width: 1px;
      }
      .commentNumber2 {
        text-align: center;
        width: 49%;
        display: inline-block;
        float: left;
        line-height: 4.4rem;
        vertical-align: middle;
        color: #a6a6a6;
        img {
          vertical-align: middle;
          height: 1.5rem;
          width: 1.5rem;
        }
      }
    }
    .inputDiv {
      position: fixed;
      height: 4.8rem;
      display: inline-block;
      background: white;
      bottom: 0;
      left: 0;
      width: 100%;
      font-size: 1.15rem;
      padding: 0.93rem 1.25rem;
      box-shadow: 0px -5px 10px #ededed;

      input {
        float: left;
        height: 2.94rem;
        vertical-align: middle;
        background: #f2f2f2;
        border-radius: 2rem;
        outline: none;
        padding-left: 1.2rem;
        width: 75%;
      }
      .commit {
        float: right;
        margin-left: 5%;
        width: 20%;
        height: 2.94rem;
        color: #666666;
        background: #f2f2f2;
        border-radius: 2px;
        vertical-align: middle;
        text-align: center;
        line-height: 2.94rem;;
      }
      .commit:active {
        background: #e6e6e6;
      }
    }
  }
</style>
